<template>
  <div class="km-input-wrap">
    <el-input class="inline-input" size="large" placeholder="接下来要做什么,按enter键提交" @keyup.enter.native="addNewTodo" ref="todoInput" v-model.trim="todoItem"></el-input>
    <!--ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:-->
  </div>
</template>
<script type="text/javascript">
// import TodoList from './TodoList.vue'
export default{
  name: 'todo-input',
  data(){
    return{
      todoItem: ''
    }
  },
  methods: {
    addNewTodo () {
      // 分发内容, 把 输入的内容分发出去
      this.$emit('add-todo', this.todoItem)
      // console.log('input-->'+this.todoItem)
      this.todoItem = ''
    }
  }

}

</script>
